<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>搜索结果</title>
    <!-- layUI的核心CSS文件 -->
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/css/layui.css"/>
    <!-- layUI的核心JS文件 -->
    <script src="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/layui.js" type="text/javascript"
            charset="UTF-8"></script>
    <script src="${pageContext.request.contextPath}/static/script/jquery-1.7.2.js" type="text/javascript"
            charset="UTF-8"></script>
<%--    回到顶部的样式--%>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/css/toTop.css">
    <style>
        .layui-card-body:hover {
            filter: alpha(Opacity=70);
            -moz-opacity: 0.7;
            opacity: 0.7;
        }

        .layui-card:hover{
            outline: 1px solid rgb(233,233,233);
        }
    </style>
</head>
<body>

<%--回到顶部--%>
<i class="layui-icon layui-icon-up toTop"></i>
<script src="${pageContext.request.contextPath}/static/js/toTop.js">
</script>

<form class="layui-form" action="showGoodsSearchResult" method="post">
    <div class="layui-layout layui-layout-admin">

        <div class="layui-header">

            <div class="layui-logo"><a style="color: #009688;">龙洞闲置购物系统</a></div>

            <!-- 头部区域（可配合layui已有的水平导航） -->

            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item">
                    <a href="ShowALLGoods">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">商品分类</a>
                    <dl class="layui-nav-child">
                        <%--                        先用书籍类测试ajax是否能实现--%>

                            <script>
                                let cards;

                                function mouseOutline() {
                                    cards = document.getElementsByClassName("layui-card");
                                    for (let i = 0; i < cards.length; i++) {
                                        cards[i].onmouseover = function () {
                                            cards[i].style.outline = "1px solid rgb(233,233,233)";
                                        }
                                        cards[i].onmouseout = function () {
                                            cards[i].style.outline = null;
                                        }
                                    }
                                }

                                function addItem(gid, gimg_path, gname, gprice) {

                                    main.innerHTML += "<div class=\"layui-col-md3\" style=\"margin-top: 50px;padding: 12px;\">\n" +
                                        "        <div class=\"layui-card\" style='text-align: center'>\n" +
                                        /* 图片 */
                                        "                <a href=\"getSingleGood?gid=" + gid + "\">\n" +
                                        "                        <div class=\"layui-card-body\" style=\"text-align: center;height: 260px;\">\n" +
                                        "                    <img src=\"" + gimg_path + "\" alt=\"图片加载失败\" style=\"max-width: 100%;max-height: 100%;\">\n" +
                                        /* 商品名 */
                                        "                        </div>\n" + gname +
                                        "                </a>\n" +
                                        /* 价格 */
                                        "            <div class=\"layui-card-header\">\n" +
                                        "                ￥  " + gprice + "\n" +
                                        "            </div>\n" +
                                        "    </div>"
                                }
                                function a1(cid) {
                                    let main = document.getElementById("main");
                                    //清空原商品,并将标题名改为该类
                                    main.innerHTML = "<div class=\"layui-row\">" +
                                        "<fieldset class=\"layui-elem-field layui-field-title\" style=\"margin-top: 50px\">\n" +
                                        "    <!-- 种类名称 -->\n" +
                                        "    <legend style=\"margin-left: 50px;\">" + cid + "商品</legend>\n" +
                                        "</fieldset>"
                                    $.ajax({
                                        url: "${pageContext.request.contextPath}/showGoodsBygcid",
                                        data: {gcid: cid},
                                        success: function (data, status) {
                                            var arr = data.goodsbygcid;
                                            if (arr != null) {
                                                for (var i = 0; i < data.goodsbygcid.length; i++) {
                                                    var gid = arr[i].gid;
                                                    var gname = arr[i].gname;
                                                    var gprice = arr[i].gprice;
                                                    var gimg_path = arr[i].gimg_path;
                                                    addItem(gid, gimg_path, gname, gprice);
                                                }
                                            } else {
                                                main.innerHTML += "<p>暂无商品</p>"
                                            }

                                            mouseOutline();
                                            console.log(data);
                                            console.log(status);
                                        },
                                    });
                                    main.innerHTML += "</div>";
                                }


                                //    ------------------------------------------------------------
                            </script>
                            <c:forEach items="${categories}" var="category">
                                <dd><a onclick="a1('${category.cname}')" style="user-select: none">${category.cname}</a></dd>
                            </c:forEach>
                    </dl>
                </li>

                <form class="layui-form" action="showGoodsSearchResult" method="post">
                    <div class="layui-input-inline" style="width: 400px;">
                        <!--  -->
                        <script>
                            function tomessage() {
                                let main = document.getElementById("main");
                                $.ajax({
                                    url: "${pageContext.request.contextPath}/showGoodsSearchResult1",
                                    data: {"gmessage": $("#gmessage").val()},
                                    success: function (data, status) {
                                        var goods = data.goodsresult;
                                        var name="查询结果";
                                        // if(data.sg=="0") {
                                        //     name="所有商品";
                                        // }
                                        if($("#gmessage").val()=="") {
                                            name="所有商品"};
                                        main.innerHTML = "<div class=\"layui-row\">" +
                                            "<fieldset class=\"layui-elem-field layui-field-title\" style=\"margin-top: 50px\">\n" +
                                            "    <!-- 种类名称 -->\n" +
                                            "    <legend style=\"margin-left: 50px;\">"+name+"</legend>\n" +
                                            "</fieldset>";
                                        for (var i = 0; i < goods.length; i++) {
                                            addItem(goods[i].gid, goods[i].gimg_path, goods[i].gname, goods[i].gprice);

                                        }

                                        main.innerHTML += "</div>";
                                        mouseOutline();
                                        console.log(data);
                                        console.log(status);
                                    }
                                })

                            }
                        </script>
                        <input type="text" name="gmessage" id="gmessage" oninput="tomessage()" required lay-verify="required" placeholder="请输入关键字"
                               autocomplete="off" class="layui-input"
                               style="margin-left: 100px">
                    </div>
                    <button class="layui-btn" lay-submit  style="margin-left: 100px">搜索</button>

                </form>
                <script type="text/javascript">
                    layui.use('form', function () {
                        var form = layui.form;
                        form.on('submit(search)', function (data) {
                            console.log(data);
                            return false;
                        });
                    });
                </script>
            </ul>

</form>
<%@include file="../common/head.jsp"%>
</div>


<!-- 内容主体区域 -->

<div id="main" style="margin:50px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px">
        <!-- 种类名称 -->
        <legend style="margin-left: 50px;">查询结果</legend>
    </fieldset>
    <div class="layui-row">
        <c:forEach var="goods" items="${sessionScope.goodsresult}">
            <div class="layui-col-md3" style="margin-top: 50px; padding: 12px">
                    <%--想要边框可以加上这个  <div class="layui-row" style="border: 1px solid ; border-color: #c0c4cc">--%>
                <div class="layui-card" style="text-align: center">
                    <a href="getSingleGood?gid=${goods.gid}" target="_blank">
                        <div class="layui-card-body" style="text-align: center;height: 260px;">
                                <%-- 图片 --%>
                            <c:if test="${goods.gimg_path==''}">
                                <img src="static/images/white1.jpg" alt="图片加载失败"
                                     style="max-width: 100%;max-height: 100%;">
                            </c:if>
                            <c:if test="${goods.gimg_path!=''}">
                                <img src="${goods.gimg_path}" alt="图片加载失败"
                                     style="max-width: 100%;max-height: 100%;">
                            </c:if>
                        </div>
                            <%-- 商品名 --%>
                            ${goods.gname}
                    </a>
                    <!-- 价格 -->
                    <div class="layui-card-header">
                        ￥${goods.gprice}
                    </div>
                </div>
            </div>
        </c:forEach>

    </div>
</div>


</div>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
</body>
</html>
